<template>

	<view class="message-value-page">
		<view>

		</view>
		<view class="message-value-list" ref="messageValueList">
			<view class="message-value-list-li" v-for="(m,index) in ConversationInfo.MessageList" :class="{
					' direction-left':m.direction == 0,
					' direction-right':m.direction ==1,
				}">
				<template v-if="m.direction == 0">
					<userAvatar :src="opponentInfo.avatar" :size="88" radius="30rpx"></userAvatar>
				</template>
				<template v-if="m.direction == 1">
					<userAvatar :src="userInfo.avatar" :size="88" radius="30rpx"></userAvatar>
				</template>
				<view class="value-content">
					<!-- 文字消息 -->
					<view class="value-content-text">
						<text>{{m.value}}</text>
					</view>
				</view>
				<view class="value-status">

					<template v-if="m.MessageStatus == 1">
						<wd-loading :size="15" />
					</template>


				</view>
			</view>
		</view>

		<view class="page-input">
			
			<view class="page-input-from">
				<view class="page-input-from-input-box">
					<input class="page-input-from-input" type="text" v-model="inputValue" />
					<wd-icon name="dong" color="#000" size="50rpx" @click="Send" />
				</view>
				<view class="page-input-from-button">
					
				</view>
			</view>
			
			<view class="page-input-interaction">
				<view class="page-input-interaction-li">
					<wd-icon name="chat" color="#000" size="50rpx" />
				</view>
				<view class="page-input-interaction-li">
					<wd-icon name="chat" color="#000" size="50rpx" />
				</view>
				<view class="page-input-interaction-li">
					<wd-icon name="chat" color="#000" size="50rpx" />
				</view>
				<view class="page-input-interaction-li">
					<wd-icon name="chat" color="#000" size="50rpx" />
				</view>
				<view class="page-input-interaction-li">
					<wd-icon name="add1" color="#000" size="50rpx" />
				</view>
			</view>
			

			<view class="page-input-menu">

			</view>

		</view>

	</view>


</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		watch,
		watchEffect,
		computed
	} from 'vue'

	import {
		onReachBottom,
		onReady,
		onLoad,
		onLaunch,
	} from "@dcloudio/uni-app"
	const messageValueList = ref(null)
	import userAvatar from '@/components/user_avatar/user_avatar.vue'
	import overallRequest from "@/utool/http/http.js"
	import useUserStore from '@/stores/store/user.js'
	const userStore = useUserStore()
	const userInfo = userStore.userInfo
	import useMessageStore from '@/stores/store/message.js'
	const MessageStore = useMessageStore()

	const directionClass = reactive({
		left: "#11b8e6",
		right: "#63c793"
	})
	const inputValue = ref("")
	// 会话ID 
	const ConversationId = ref("1")

	const data = reactive({
		id: null,
		user: 1512,
		inputValue: "",
		ConversationId: null,
		MessageList: [],
		MessageListRequest: {
			page: null,
			pages: null,
			limit: null,
		},
		Conversation: {
			id: null,
			type: null,
		},
		opponentInfo: {}
	})
	const ConversationInfo = computed(() => {
		let id = data.id
		let Conversation = MessageStore.GetStoreMessageHistory(id)
		// 会话ID
		let ConversationId = Conversation.id
		// 会话状态
		let ConversationStatus = Conversation.state
		// 当前会话类型
		let ConversationType = Conversation.type
		// 会话预览图
		let ConversationPreviewImage = null
		// 会话页面标题
		let ConversationTitle = null

		return Conversation
	})

	watch(() => ConversationInfo.MessageList, () => {
		console.log("变动");
	})
	onLoad((Params) => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();
		// 监听从用户资料页发起的消息事件
		eventChannel.on('UserInfoConversation', (pageParmas) => {
			uni.showLoading({title: "加载信息中"})
			let {data} = pageParmas
			Object.assign(userInfo, data)
			uni.hideLoading()
		})
		// 监听从消息页面点击进来的事件
		eventChannel.on('ConversationList', (pageParmas) => {
			uni.showLoading({title: "加载信息中"})
			let {data} = pageParmas
			Object.assign(userInfo, data)
			uni.hideLoading()
		})
		// 监听从动态点进来的时间
		eventChannel.on('Dynamic', (pageParmas) => {
			uni.showLoading({title: "加载信息中"})
			let {data} = pageParmas
			Object.assign(userInfo, data)
			uni.hideLoading()
		})
	})
	onReady(() => {
		console.log("messageValueList", messageValueList);
	})
	// 发送消息
	function Send() {
		// if (!inputValue.value) return;
		// let data = MessageFromData()
		let url = `/user/SendMessage`
		overallRequest(url, {
			method: "POST",
			// data
		}).then(r=>{
			console.log(r);
		}).catch(e=>{
			console.log(e);
		})
		// MessageStore.SendMessage({}).then(res => {
		// 	// console.log(res);
		// 	inputValue.value = ""
		// 	// let {
		// 	// 	msg
		// 	// } = res
		// 	// uni.showToast({    
		// 	// 	icon: "none",
		// 	// 	title: msg
		// 	// })
		// 	console.log("发送信息成功");
		// }).catch(err => {
		// 	console.log("发送信息失败", err);
		// 	// let {
		// 	// 	msg
		// 	// } = err
		// 	// uni.showToast({
		// 	// 	icon: "error",
		// 	// 	title: msg
		// 	// })
		// })
	}

	// 会话格式生成函数
	function MessageFromData() {
		// 前端本地消息ID
		let MessageId = null
		// 会话ID
		let ConversationId = data.Conversation.id
		// 当前会话类型
		let ConversationType = data.Conversation.type
		// 消息状态
		let MessageState = 0
		// 消息类型
		let MessageType = null

		if (ConversationType == "alone") {

			let toUser = data.user

			MessageType = "user"

			let value = inputValue.value

			return {
				id: ConversationId,
				message_type: MessageType,
				type: ConversationType,
				to_user: toUser,
				value: value,
				state: MessageState
			}
		} else if (ConversationType == "Group") {
			return {
				id: ConversationId,
				type: ConversationType,
				to_user: toUser,
				state: MessageState
			}
		}
	}
</script>

<style scoped lang="scss">
	.message-value-page {
		display: flex;
		flex-direction: column;
		height: 100%;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.message-value-list {
		flex: 1;
		height: auto;
		width: 100%;
	}

	page {
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.message-value-list {
		flex: 1;
		padding: 15rpx 30rpx;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
	}

	.message-value-list-li {
		display: flex;
		gap: 15rpx;
		padding: 15rpx 0rpx;
	}

	.direction-left {
		flex-direction: row;
	}

	.direction-right {
		flex-direction: row-reverse;
		text-align: right;
	}

	.value-content {
		max-width: 70%;
	}

	.value-content-text {
		font-size: 28rpx;
		display: inline-block;
		padding: 20rpx;
		border-radius: 10rpx;
		line-height: 38rpx;
		margin-top: 22rpx;
	}

	.value-status {
		width: 40rpx;
		height: 40rpx;
		margin-top: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.direction-right .value-status {
		margin-right: 6px;
	}

	.direction-left .value-status {
		margin-left: 6px;
	}


	.direction-left .value-content-text {
		background: #11b8e6;
	}


	.direction-right .value-content-text {
		background: #63c793;
	}

	.page-input {
		width: 100%;
		background: white;
		border-top: 1rpx solid #c3c3c344;
		background-color: #c3c3c344;
		position: fixed;
		bottom: 0rpx;
	}

	.page-input-from {
		display: flex;
		align-items: center;
		height: 120rpx;
		box-sizing: border-box;
		padding: 0rpx 10rpx;
	}
	
	.page-input-interaction{
		height: 60rpx;
		display: flex;
		&-li{
			width: 20%;
			height: 65rpx;
		}
	}

	.page-input-from-button {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0rpx 10rpx;
	}

	.page-input-from-input {
		flex: 1;
		background-color: white;
		height: 75rpx;
		border-radius: 10rpx;
		margin: 0rpx 20rpx;
	}
</style>